/**
 * 添加采购单按钮
 */
var React = require('react-native');
var {msg} = require('iflux-native');
var {
  View,
  Text,
  Image,
  TouchableOpacity,
  PixelRatio,
  StyleSheet
} = React;


//just do nothing
var noop = () => {};


var AddButton = React.createClass({
  getDefaultProps() {
    return {
      disabled: false,
      onPress: noop,
      onShelfPress: noop
    }
  },


  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={this._handleShelf}
          style={styles.btn_shelf}>
          <View style={styles.box}>
            <Image style={styles.heart} source={this.props.isShelf ? require('img/heart.png') :require('img/heart_red.png')} />
            <Text style={[styles.txt,styles.collect,{color: this.props.isShelf ? '#b5bcc2' : '#326da7'}]}>{this.props.isShelf?'已':''}收藏</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.shopping}
          onPress={()=>{msg.emit('pop-up-close');msg.emit('route:goToNext', {sceneName: 'ShoppingCart', showReturnBtn: true})}}>
          <View style={styles.shoppingCart}>
            <Image style={styles.cart} source={require('img/cart_grey.png')}/>
            {
              this.props.cartCount ?
                <View style={styles.cartCount}><Text style={styles.num}>{this.props.cartCount}</Text></View>
                :
                null
            }

          </View>
          <Text style={[styles.txt,{color: '#326da7'}]}>采购单</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this._handlePress}
          style={[styles.btn, this.props.disabled ? {} : {backgroundColor: '#939495'}]}>
          <Text style={styles.txt}>加入采购单</Text>
        </TouchableOpacity>
      </View>
    );
  },


  _handlePress() {
    if(this.props.disabled) {
      this.props.onPress();
    }
  },


  _handleShelf(){
    this.props.onShelfPress();
  }



});

var styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#f5f7fa',
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: '#e1e1e1'
  },
  btn: {
    backgroundColor: '#43c6a6',
    alignSelf: 'stretch',
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingTop: 13,
    paddingBottom: 13,
    padding:10
  },
  btn_shelf: {
    height: 42,
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft:10,
    paddingRight: 10,
  },
  box: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  txt: {
    fontSize: 16,
    color: '#FFF'
  },
  heart: {
    width: 20,
    height: 20,
    marginRight: 5,
  },
  shopping: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 42,
    paddingLeft: 10,
    paddingRight: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  shoppingCart: {
    marginRight: 10,
  },
  cart: {
    width: 21,
    height: 19,
  },
  cartCount: {
    position: 'absolute',
    right: -10,
    top: -10,
    width: 18,
    height: 18,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fc3c27',
    borderRadius: 9,
  },
  num: {
    fontSize: 12,
    color: '#fff'
  }
});


module.exports = AddButton;
